<template>
	<view>
		<!-- <view
			class="product-card"
			>
			<view class="shop-left" style="display: flex; align-items: center;">
				<image src="https://alicdn.joyballet.cn/eyemanager/wechat/shop_icon.png" style="width: 50px;" mode="widthFix"></image>
			</view>
			<view class="shop-right">
				<view class="shop-name" style="font-size: 24px;">{{ shop.name }}
				</view>
				<view class="shop-tags">
					<text class="tag" style="color: #B9751C;background-color: #FDE6C8;">{{ shop.tag1 || '清晰' }}</text>
					<text class="tag" style="color: #2D7D9D;background-color: #C9E8F5;">{{ shop.tag2 || '控轴' }}</text>
					<text class="tag" style="color: #1A918A;background-color: #C6E6E9;">{{ shop.tag3 || '舒适' }}</text>
				</view>
				<view class="shop-time" style="color:#EBA540;">
					<image src="https://alicdn.joyballet.cn/eyemanager/wechat/shop_lock.png" class="text-icon"  mode="widthFix"></image>
					<text class="iconfont icon-clock"></text> 接诊时间： {{ shop.acceptTime || '周一至周日 10:00-20:00' }}</view>
				<view class="shop-address" style="color: #B4B4B4;">
					<image src="https://alicdn.joyballet.cn/eyemanager/wechat/shop_location.png" class="text-icon"  mode="widthFix"></image>
					<text class="iconfont icon-map"></text> {{ shop.address }}
				</view>
			</view>
		</view> -->
		<view class="banner">
			<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/shop_banner.jpg" style="width:100%" mode="widthFix"></image>
		</view>
		<!-- 期数列表 -->
		<view class="period-list">
			<view @click="jumpApoint(item)" class="period-item" v-for="item in weekList">
				<!-- 已满人的期数 -->
				<view class="period-info" v-if="item.status == 0">
					<text class="period-number" style="color: #FF6060;">{{ item.period }}</text>
					<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/cityPoster/calendar_red.png" style="width: 15px;"  mode="widthFix"></image>
					<text class="period-date" style="color: #FF6060;">{{ item.startDateText }}-{{ item.endDateText }}</text>
				</view>
				<!-- 进行中的期数 -->
				<view class="period-info" v-if="item.status == 1">
					<text class="period-number" style="color: #089790;">{{ item.period }}</text>
					<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/cityPoster/appoint_calendar.png" style="width: 15px;"  mode="widthFix"></image>
					<text class="period-date" style="color: #089790;">{{ item.startDateText }}-{{ item.endDateText }}</text>
				</view>
				<!-- 已取消的期数 -->
				<view class="period-info" v-if="item.status == 2">
					<text class="period-number" style="color: #F7B454;">{{ item.period }}</text>
					<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/cityPoster/calendar_yellow.png" style="width: 15px;"  mode="widthFix"></image>
					<text class="period-date" style="color: #F7B454;">{{ item.startDateText }}-{{ item.endDateText }}</text>
				</view>
				<view class="period-status">
					<text v-if="item.status == 0" class="status-text" style="background-color: #FF6060;color: #fff;">{{ item.process }}</text>
					<text v-if="item.status == 1" class="status-text" style="background-color: #089790;color: #fff;">{{ item.process }}</text>
					<text v-if="item.status == 2" class="status-text" style="background-color: #F7B454;color: #fff;">{{ item.process }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop: [],
				shopId: '',
				weekList: [],
				currentDate: new Date()
			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			// 初始化数据
			this.initData();
		},
		methods: {
			// 初始化数据
			initData() {
				// 获取店铺信息
				// this.getShopInfo();
				this.getWeek();
			},
			getShopInfo() {
				const that = this
				try {
					this.$http.GET('/app/order/order/getShopInfo', {
						id: this.shopId
					}, function (res) {
						that.shop = res.data
					})
				} catch (error) {
					console.error('获取店铺列表失败:', error)
				}
			},
			// 获取期数
			getWeek() {
				console.log('getWeek')
				const that = this
				try {
					this.$http.GET('/app/order/order/getOpenPeriods', {
						// shopId: this.shopId
					}, function (res) {
						that.weekList = res.data
						console.log('week', that.weekList, res.data.length, res.data[0].endDate, that.weekList.length)
					})
				} catch (error) {
					console.error('获取期数失败:', error)
				}
			},
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			// 获取状态文本
			getStatusText(item) {
				// 这里可以根据实际业务逻辑判断状态
				// 示例逻辑：第一期已满员，其余进行中或暂未开放
				if (item.period === 1) {
					return '已满员'
				} else if (item.period <= 3) {
					return '进行中'
				} else {
					return '暂未开放'
				}
			},
			jumpApoint(item) {
				console.log('jumpApoint', item)
				if (item.status == 0) {
					uni.showToast({
						title: '该期数已满员，请选择其他期数',
						icon: 'none'
					})
					return
				}
				if (item.status == 2) {
					uni.showToast({
						title: '该期数未开始，请选择其他期数',
						icon: 'none'
					})
					return
				}
				// this.$tools.routerTo('/pages/index/appoint?startDate=' + item.startDate + '&endDate=' + item.endDate + '&shopId=' + this.shopId, 'navigateTo', 'none')
				this.$tools.routerTo('/pages/index/appointShop?startDate=' + item.startDate + '&endDate=' + item.endDate, 'navigateTo', 'none')
			}
		}
	}
</script>


<style>
.text-icon {
  width: 15px;
  margin-right: 5px;
}
.banner {
  width: 100%;
}
.container {
  width: 100%; /* 宽度铺满屏幕 */
  height: 100vh; /* 高度铺满视口 */
  min-height: 100%; /* 确保至少填满内容高度 */
  background-color: #F9F9F9; /* 背景颜色 */
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
  box-sizing: border-box; /* 确保内边距和边框不增加总宽度 */
  /* 移除顶部内边距，因为城市栏不再固定在顶部 */
}

/* 城市栏容器 - 用于控制城市栏的位置 */
.city-bar-container {
  width: 100%;
  padding: 16rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

/* 顶部城市栏样式 */
.city-bar {
  /* 移除固定定位 */
  background-color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-left: auto;
}

.location-icon {
  margin-top: 1vw;
  width: 201px;
  object-fit: contain;
}

.city-text {
  font-size: 28rpx;
  color: #333333;
}

.product-card {
    padding: 15px;
    border-radius: 10px;
    margin: 10px;
    display: flex;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 添加这一行，确保内容不会溢出容器 */
    position: relative; /* 添加相对定位，用于对号图片的绝对定位 */
}

/* 添加选中样式 */
.selected-card {
    border: 2px solid #00C853; /* 绿色边框 */
}

.shop-right {
    flex: 1; /* 添加这一行，让shop-right占据剩余空间 */
    padding-left: 10px; /* 添加一些左边距，使内容不紧贴着图片 */
}

.shop-name {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    word-break: break-all; /* 添加这一行，确保长名称能够换行 */
}

.shop-address {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
    word-break: break-all; /* 添加这一行，确保长地址能够换行 */
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.shop-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.shop-tags {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.tag {
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.shop-info {
    margin-bottom: 15px;
}

.shop-time, .shop-address, .shop-distance {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
}

.shop-info .iconfont {
    margin-right: 5px;
    color: #1890ff; 
}

.location-container {
    display: flex;
    justify-content: flex-end;
}

.location-btn {
    background-color: #1890ff;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
}

/* 期数列表样式 */
.period-list {
    margin: 10px;
}

.period-item {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 50rpx 30rpx;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.period-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-number {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.period-date {
    font-size: 32rpx;
    color: #666;
}

.period-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-text {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 32rpx;
}

.status-full {
    background-color: #FFF0F0;
    color: #E74C3C;
}

.status-ongoing {
    background-color: #E8F8F5;
    color: #27AE60;
}

.status-notopen {
    background-color: #F0F0F0;
    color: #999;
}

.remind-btn {
    background-color: #FFF2CC;
    color: #F39C12;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
}
</style>
